{% macro humidity() %}
  {% if current.humidity %}
    <span class="humidity"
      ><span>{{ current.humidity | decimalSymbol }}</span><sup>&nbsp;<i class="wi wi-humidity humidity-icon"></i></sup
    ></span>
  {% endif %}
{% endmacro %}
{% if current %}
  {% if not config.onlyTemp %}
    <div class="normal medium">
      <span class="wi wi-strong-wind dimmed"></span>
      <span>
        {{ current.windSpeed | unit("wind") | round }}
        {% if config.showWindDirection %}
          <sup>
            {% if config.showWindDirectionAsArrow %}
              <i class="fas fa-long-arrow-alt-down" style="transform:rotate({{ current.windFromDirection }}deg)"></i>
            {% else %}
              {{ current.cardinalWindDirection() | translate }}
            {% endif %}
            &nbsp;
          </sup>
        {% endif %}
      </span>
      {% if config.showHumidity === "wind" %}
        {{ humidity() }}
      {% endif %}
      {% if config.showSun %}
        <span class="wi dimmed wi-{{ current.nextSunAction() }}"></span>
        <span>
          {% if current.nextSunAction() === "sunset" %}
            {{ current.sunset | formatTime }}
          {% else %}
            {{ current.sunrise | formatTime }}
          {% endif %}
        </span>
      {% endif %}
      {% if config.showUVIndex %}
        <td class="align-right bright uv-index">
          <div class="wi dimmed wi-hot"></div>
          {{ current.uv_index }}
        </td>
      {% endif %}
    </div>
  {% endif %}
  <div class="flex large type-temp">
    {% if config.showIndoorTemperature and indoor.temperature or config.showIndoorHumidity and indoor.humidity %}
      <span class="medium fas fa-home"></span>
      <span style="display: inline-block">
        {% if config.showIndoorTemperature and indoor.temperature %}
          <sup class="small" style="position: relative; display: block; text-align: left;">
            <span> {{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }} </span>
          </sup>
        {% endif %}
        {% if config.showIndoorHumidity and indoor.humidity %}
          <sub class="small" style="position: relative; display: block; text-align: left;">
            <span> {{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }} </span>
          </sub>
        {% endif %}
      </span>
    {% endif %}
    {% if current.weatherType %}
      <span class="light wi weathericon wi-{{ current.weatherType }}"></span>
    {% endif %}
    <span class="light bright">{{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}</span>
    {% if config.showHumidity === "temp" %}
      <span class="medium bright">{{ humidity() }}</span>
    {% endif %}
  </div>
  {% if (config.showFeelsLike or config.showPrecipitationAmount or config.showPrecipitationProbability) and not config.onlyTemp %}
    <div class="normal medium feelslike">
      {% if config.showFeelsLike %}
        <span class="dimmed">
          {% if config.showHumidity === "feelslike" %}
            {{ humidity() }}
          {% endif %}
          {{ "FEELS" | translate({DEGREE: current.feelsLike() | roundValue | unit("temperature") | decimalSymbol }) }}
        </span>
        <br />
      {% endif %}
      {% if config.showPrecipitationAmount and current.precipitationAmount %}
        <span class="dimmed"> <span class="precipitationLeadText">{{ "PRECIP_AMOUNT" | translate }}</span> {{ current.precipitationAmount | unit("precip", current.precipitationUnits) }} </span>
        <br />
      {% endif %}
      {% if config.showPrecipitationProbability and current.precipitationProbability %}
        <span class="dimmed"> <span class="precipitationLeadText">{{ "PRECIP_POP" | translate }}</span> {{ current.precipitationProbability }}% </span>
      {% endif %}
    </div>
  {% endif %}
  {% if config.showHumidity === "below" %}
    <span class="medium dimmed">{{ humidity() }}</span>
  {% endif %}
{% else %}
  <div class="dimmed light small">{{ "LOADING" | translate }}</div>
{% endif %}
<!-- Uncomment the line below to see the contents of the `current` object. -->
<!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{ current | dump }}</div> -->
